<template>
  <div v-if="visible" class="task-detail-modal-overlay" @click="close">
    <div class="task-detail-modal-container" @click.stop>
      <div class="task-detail-modal-header">
        <h2>{{ task?.title }}</h2>
        <button class="task-detail-modal-close" @click="close">&times;</button>
      </div>
      <div class="task-detail-modal-body">
        <div class="task-detail-section">
          <div class="task-detail-row">
            <label>任务状态:</label>
            <span :class="['status-badge', getStatusClass(task?.status)]">
              {{ getStatusText(task?.status) }}
            </span>
          </div>
          
          <div class="task-detail-row">
            <label>发布者:</label>
            <span>{{ task?.employerName }}</span>
          </div>
          
          <div class="task-detail-row">
            <label>预算:</label>
            <span class="budget">¥{{ task?.budget }}</span>
          </div>
          
          <div class="task-detail-row">
            <label>发布日期:</label>
            <span>{{ formatDate(task?.publishDate) }}</span>
          </div>
          
          <div class="task-detail-row description-row">
            <label>任务描述:</label>
            <div class="task-description">{{ task?.description }}</div>
          </div>
          
          <!-- 任务评价部分 -->
          <div v-if="task?.evaluation" class="task-detail-row evaluation-section">
            <label>任务评价:</label>
            <div class="evaluation-content">
              <div class="evaluation-header">
                <div class="rating">
                  <span 
                    v-for="i in 5" 
                    :key="i" 
                    class="star" 
                    :class="{ 'filled': i <= task.evaluation.score }"
                  >
                    ★
                  </span>
                </div>
                <div class="evaluation-time">
                  {{ formatDate(task.evaluation.evaluationTime) }}
                </div>
              </div>
              <div class="evaluation-text">
                {{ task.evaluation.content }}
              </div>
            </div>
          </div>
          
          <div v-else class="task-detail-row evaluation-section">
            <label>任务评价:</label>
            <div class="no-evaluation">暂无评价</div>
          </div>
        </div>
      </div>
      <div class="task-detail-modal-footer">
        <button class="modal-button" @click="close">关闭</button>
        <button 
          v-if="showAcceptButton && task?.status === 0" 
          class="modal-button accept-button"
          @click="acceptTask"
        >
          接取任务
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>

const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  task: {
    type: Object,
    default: () => ({})
  },
  showAcceptButton: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['close', 'accept'])

const close = () => {
  emit('close')
}

const acceptTask = () => {
  emit('accept', props.task?.taskId)
}

// 获取状态文本
const getStatusText = (statusCode) => {
  const statusMap = {
    0: '待接取',
    1: '进行中',
    2: '已完成',
    3: '已关闭'
  }
  return statusMap[statusCode] || '未知状态'
}

// 获取状态样式类
const getStatusClass = (statusCode) => {
  const classMap = {
    0: 'pending',
    1: 'in-progress',
    2: 'completed',
    3: 'closed'
  }
  return classMap[statusCode] || 'unknown'
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}
</script>

<style scoped>
.task-detail-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.task-detail-modal-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow: hidden;
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.task-detail-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid #eee;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.task-detail-modal-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.task-detail-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: white;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-detail-modal-close:hover {
  color: #f0f0f0;
}

.task-detail-modal-body {
  padding: 25px;
  max-height: 60vh;
  overflow-y: auto;
}

.task-detail-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.task-detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.task-detail-row:last-child {
  border-bottom: none;
}

.task-detail-row label {
  font-weight: 600;
  color: #333;
  min-width: 80px;
  flex-shrink: 0;
}

.task-detail-row .status-badge {
  font-size: 14px;
  padding: 6px 12px;
}

.task-detail-row .budget {
  font-size: 20px;
  font-weight: 700;
  color: #43e97b;
}

.task-description {
  color: #666;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.evaluation-section {
  flex-direction: column;
  align-items: flex-start;
}

.evaluation-content {
  flex: 1;
  width: 100%;
}

.evaluation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.rating {
  display: flex;
  gap: 2px;
}

.star {
  color: #ddd;
  font-size: 18px;
}

.star.filled {
  color: #ffc107;
}

.evaluation-time {
  color: #999;
  font-size: 14px;
}

.evaluation-text {
  color: #666;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.no-evaluation {
  color: #999;
  font-style: italic;
}

.task-detail-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 25px;
  border-top: 1px solid #eee;
  background: #f8f9fa;
}

.modal-button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.modal-button {
  background-color: #6c757d;
  color: white;
}

.modal-button:hover {
  background-color: #5a6268;
  transform: translateY(-2px);
}

.modal-button.accept-button {
  background: linear-gradient(135deg, #28a745 0%, #238b3c 100%);
  color: white;
}

.modal-button.accept-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
}

@media (max-width: 768px) {
  .task-detail-modal-container {
    width: 95%;
  }
  
  .task-detail-modal-header {
    padding: 15px 20px;
  }
  
  .task-detail-modal-header h2 {
    font-size: 20px;
  }
  
  .task-detail-modal-body {
    padding: 20px;
  }
  
  .task-detail-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .task-detail-row label {
    margin-bottom: 5px;
  }
}
</style>